<template>
	<view class="background" style="details">
		<!-- 商品图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for='(item,index) in swiperList' :key="index">
				<view class="swiper-item">
					<image class="swiper-img" :src="item.imgUrl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 价格和名称 -->
		<view class="details-goods">
			<view class="goods-pprice">$399.00</view>
			<view class="goods-oprice">$599.00</view>
			<view class="goods-name">大衣绒毛大款2024年必买，不买就错过啦，爆款甩卖GG008</view>
		</view>
		<!-- 商品详情图 -->
		<view>
			<view>
				<image class='details-img' src="../../static/img/fenlei-img/detail1.jpg"></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/fenlei-img/detail2.jpg"></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/fenlei-img/detail3.jpg"></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/fenlei-img/detail4.jpg"></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/fenlei-img/detail5.jpg"></image>
			</view>
		</view>

		<!-- 商品列表 -->
		<Card cardTitle='看了又看'></Card>
		<IndexKapiang></IndexKapiang>

		<!-- 底部 -->
		<view class="details-foot">
			<view>
				<image class="btn" src="/static/img/fenlei-img/dianpu.png"></image>
			</view>
			<view @click.stop="confirmCancelFavorite(item)" class="star">
				<!-- <svg v-if="isFavorite" width="20" height="20" viewBox="0 0 24 24" fill="yellow"
					xmlns="http://www.w3.org/2000/svg">
					<path
						d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
				</svg>
				<svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="gray"
					xmlns="http://www.w3.org/2000/svg">
					<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
						stroke-width="2" stroke-linejoin="round" />
				</svg> -->
				<image v-if="isFavorite" class="collection" src="/static/img/fenlei-img/collection_fill.png"></image>
				<image v-else class="collection" src="/static/img/fenlei-img/collection.png"></image>
			</view>
			<view class="add-shopcart">加入购物车</view>
			<view class="purchase">立即购买</view>
		</view>

	</view>
</template>

<script>
	import Card from '@/components/common/Card.vue'
	import IndexKapiang from '../../components/index/IndexKapiang.vue'
	export default {
		data() {
			return {
				swiperList: [{
						imgUrl: "../../static/img/fenlei-img/details1.jpeg"
					},
					{
						imgUrl: "../../static/img/fenlei-img/details2.jpeg"
					},
					{
						imgUrl: "../../static/img/fenlei-img/details3.jpeg"
					}
				],
				dataList: [{
						id: 1,
						imgUrl: "../../static/img/youhui-img/bao1.jpg",
						name: "游戏限量款书包",
						price: "38.4",
						oprice: "64",
						discount: "6"
					},
					{
						id: 2,
						imgUrl: "../../static/img/youhui-img/bao2.jpg",
						name: "游戏限量款书包",
						price: "35",
						oprice: "70",
						discount: "5"
					},
					{
						id: 3,
						imgUrl: "../../static/img/youhui-img/baozhen1.jpg",
						name: "手心里的温柔–萌宠抱枕！",
						price: "21",
						oprice: "30",
						discount: "7"
					},
					{
						id: 4,
						imgUrl: "../../static/img/youhui-img/baozhen2.jpg",
						name: "可爱卡通女孩造型，柔软亲肤，舒适陪伴。",
						price: "30",
						oprice: "100",
						discount: "3"
					}
				],
				isFavorite: false,
				// 收藏ID
				starId: '',
			}
		},
		components: {
			Card,
			IndexKapiang
		},
		onLoad(options) {
			let historyList = uni.getStorageSync('historyList');
			this.starId = options.id
			if (!historyList) {
				historyList = [];
			} else {
				historyList = JSON.parse(historyList);
			}
			historyList.unshift({
				id: options.id,
				time: this.getCurTime()
			})
			uni.setStorageSync('historyList', JSON.stringify(historyList));
			this.isStar()
		},
		onHide() {
			this.inputStar()
		},
		methods: {
			// 返回当前时间
			getCurTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				const currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return currentTime
			},
			// 收藏
			confirmCancelFavorite() {
				this.isFavorite = !this.isFavorite;
				this.inputStar()
			},
			// 收藏录入
			inputStar() {
				// 从本地存储获取收藏列表
				let starList = uni.getStorageSync('starList');
				if (!starList) {
					starList = []; // 如果不存在，初始化为空数组
				} else {
					starList = JSON.parse(starList); // 解析存储数据为 JSON
				}

				// 查找当前商品是否已经被收藏
				const currentPro = starList.find(item => item.id === this.starId);

				// 如果当前商品已收藏且点击取消收藏
				if (currentPro && !this.isFavorite) {
					starList = starList.filter(item => item.id !== this.starId); // 移除该商品
					console.log("商品已取消收藏", this.starId);
				}
				// 如果当前商品未收藏且点击收藏
				else if (!currentPro && this.isFavorite) {
					starList.unshift({
						id: this.starId
					}); // 添加到收藏夹
					console.log("商品已添加收藏", this.starId);
				}

				// 更新本地存储
				uni.setStorageSync('starList', JSON.stringify(starList));
				console.log("当前收藏列表", starList);
			},

			// 进入页面显示是否被收藏
			isStar() {
				let starList = uni.getStorageSync('starList');
				if (!starList) {
					starList = []
				} else {
					starList = JSON.parse(starList);
				}
				// 查看当前商品是否已经被收藏
				const currentPro = starList.find(item => {
					return item.id == this.starId
				})
				console.log("currentPro",currentPro)
				this.isFavorite = currentPro ? true : false
			}
		}
	}
</script>

<style scoped>
	/* 页面背景 */
	.background {
		background-image: url("http://5b0988e595225.cdn.sohucs.com/images/20200214/b10c23d5aa5a444da21bc6058475cc1f.jpeg");
		/* 覆盖整个背景区域 */
		background-size: cover;
		/* 背景图片居中显示 */
		background-position: center;
	}

	swiper {
		width: 100%;
		height: 700rpx;
	}

	.swiper-img {
		width: 100%;
		height: 700rpx;
	}

	.details-goods {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		padding: 10rpx;
	}

	.details-img {
		width: 100%;
	}


	/* 商品详情底部 */
	.iconfont {
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		margin: 0 10rpx;
		align-items: center;
		justify-content: center;
	}

	.details-foot {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
	}

	.details-foot .btn {
		width: 30px;
		height: 30px;
	}

	.add-shopcart {
		margin: 0 40rpx;
		padding: 6rpx 30rpx;
		background-color: #000000;
		color: #FFFFFF;
		border-radius: 40rpx;
	}

	.purchase {
		margin: 0 40rpx;
		padding: 6rpx 30rpx;
		background-color: #49BDFB;
		color: #FFFFFF;
		border-radius: 40rpx;
	}

	.collection {
		width: 25px;
		height: 25px;
		margin-left: 10px;
	}
</style>